import { useState, useEffect } from "react";
import { Select } from "@douyinfe/semi-ui";
const Option = Select.Option;

const Device = () => {
  const [audioInputs, setAudioInputs] = useState<MediaDeviceInfo[]>([]);
  const [audioOutputs, setAudioOutputs] = useState<MediaDeviceInfo[]>([]);
  const [videoInputs, setVideoInputs] = useState<MediaDeviceInfo[]>([]);

  useEffect(() => {
    navigator.mediaDevices.enumerateDevices().then((devices) => {
      devices.forEach((deviceInfo) => {
        switch (deviceInfo.kind) {
          case "audioinput":
            setAudioInputs([...audioInputs, deviceInfo]);
            break;
          case "audiooutput":
            setAudioOutputs([...audioOutputs, deviceInfo]);
            break;
          case "videoinput":
            setVideoInputs([...videoInputs, deviceInfo]);
            break;
          default:
            break;
        }
      });
    });
  }, []);
  return (
    <div className="mx-auto w-2/3 flex justify-between mt-6">
      <div>
        <span>Audio input:</span>
        <Select style={{ width: 120 }}>
          {audioInputs.map((item) => (
            <Option value={item.deviceId} key={item.label}>
              {item.kind}
            </Option>
          ))}
        </Select>
      </div>
      <div>
        <span>Audio output:</span>
        <Select style={{ width: 120 }}>
          {audioOutputs.map((item) => (
            <Option value={item.deviceId} key={item.label}>
              {item.kind}
            </Option>
          ))}
        </Select>
      </div>
      <div>
        <span>Video input:</span>
        <Select style={{ width: 120 }}>
          {videoInputs.map((item) => (
            <Option value={item.deviceId} key={item.label}>
              {item.kind}
            </Option>
          ))}
        </Select>
      </div>
    </div>
  );
};
export default Device;
